<template>
  <div>
   <div class="two">
     <li>
      <router-link to="/contacts/all_contacts">All_contacts</router-link>
    </li>
    <li>
      <router-link to="/contacts/alice">Alice</router-link>
    </li>
    <li>
      <router-link to="/contacts/bob">Bob</router-link>
    </li>
    <button @click="clickFn">随机显示</button>
    <router-view></router-view>
   </div>
  </div>
</template>

<script>
export default {
methods: {
  clickFn(){
     const arr = ['/contacts/all_contacts', '/contacts/alice', '/contacts/bob']
      const index = Math.floor(Math.random() * arr.length)
      this.$router.push(arr[index])
  }
}
}
</script>

<style>
.two {
  margin-top: 20px;
}
.two li {
  margin-top: 10px;
}
button {
  margin-top: 15px;
}
</style>